Лучшие заметки о веб-дизайне за 2017 год, материалы для скачивания и вдохновения

Первая статья в новом году традиционно будет в виде дайджеста — предлагаем вам ознакомиться с лучшими публикациями Дизайн Мании за 2017. Они пригодятся как новым посетителям, которые только недавно подключились к аудитории сайта, так и тем, кто хотел бы освежить в памяти все важные заметки прошедшего года.

Основные тематики постов в 2017 не сильно отличались от более ранних периодов, все они сгруппированы в несколько разделов: статьи, материалы для скачивания, вдохновение и сервисы. Подобные записи найдете за 2016 год и предыдущий 2015  — многие из них сейчас все также актуальны.

Если говорить о самом блоге, то прошедшие 365 дней, в принципе, можно занести в актив. Не смотря на то, что полностью реализовать все планы не получилось, работа была проделана не малая: во первых, удалось увеличить количество материалов на 15%, во-вторых, практически закончили внедрение нового шаблона. В текущем 2018 все должно свершится.

Возможно, вас также заинтересуют итоговые дайджесты из других тематических блогов — лучшие посты о Вордпресс 2017 из WordPress Inside и полезные фишки для вебмастеров и оптимизаторов из Tod’s Blog.

Статьи про веб-дизайн

В 2017 направлению уделяли гораздо больше внимания нежели раньше. Здесь представлены объемные и детальные публикации по вопросам, связанным с веб-дизайном и проектированием сайтов. Теоретические знания дополнены практическими примерами и пригодится не только новичкам.

Тренды

• Тенденции веб-дизайна 2017 — десятка основных особенностей в разработке внешнего вида онлайн проектов за прошлый год: нестандартная сетка, карточки, большая типографика, яркие градиенты, параллакс эффект, геометрические формы и др.
• Современные тренды логотипов 2017 — аналогичный предыдущему материал, но уже по разработке лого: затухание цвета, простота, парные объекты, микролинии, пересечения элементов, символ троеточия, текстовые блоки и другие.
• Летающие логотипы — это один из мини-трендов, которые иногда встречались на некоторых веб-ресурсах. В основном подход используется для отображения иконок соц.сетей или сервисов.
• Фоновое подчеркивание текста — еще одна небольшая фишка, что была замечена в макетах страниц. В статье есть парочка скриншотов + описание реализации через свойство text-decoration-skip (ниже данная фишка CSS рассмотрена более детально).

Элементы сайтов

• Гамбургер-меню: история и альтернативы — что вообще это за элемент навигации такой и какими другими вариантами его можно заменить. Так как споры насчет рациональности применения не утихают, полезно знать альтернативные решения.
• Иконки гамбургер меню — в продолжение предыдущей темы рассмотрели некоторые примеры сайтов, где сделана подобная навигация. Дополнительно найдете подборку для скачивания и скрипты, позволяющие добавить их в собственных проектах.
• Бесконечная прокрутка — еще одно «спорное» решение, которому не все доверяют. В статье приведен список возможностей/преимуществ такой прокрутки, почитайте о причинах, когда ее делать не следует, и посмотрите несколько подсказок по внедрению.
• Все про шапку сайта — запись полностью посвящена хедеру (header). Во-первых, здесь рассматриваются нюансы его использования: важность элемента на странице, что может в него входить, а во-вторых, есть советы по реализации: фиксированный блок, двойное или гамбургер-меню, визуальное оформление.

Веб-дизайн

• Методы сплит-скрин дизайна — подборка наиболее удачных способов внедрения одного из трендов прошлого года (Split Screen): визуальный переход, анимация, яркие цвета, типографика, контраст.
• Конец эпохи статичных лого? — современные логотипы должны быть универсальными и оригинальным, поэтому процесс их разработки значительно усложняется. Каждая реализация должна иметь разные варианты/форматы и, возможно, даже анимацию.
• Золотое сечение в дизайне — о теоретических принципах построения макета страницы с эффективным представлением информации: золотая спирать, правило третей, размеры блоков. Интересное чтиво.
• Разница между UI и UX — разбираем на практических примерах основные отличия между пользовательским интерфейсом и взаимодействием. Достаточно один раз вдумчиво прочитать чтобы раз и навсегда усвоить чем эти понятия отличаются.

Обучение, верстка

Кроме постоянного раздела с лучшими курсами фотошопа / дизайна мы стараемся публиковать и другие заметки по усовершенствованию своих навыков в разных сферах и программах. Традиционно часть ссылок здесь посвящены вопросам верстки. Отличительной особенностью статей есть детальное пояснение, близкое даже новичкам.

• GIF анимация в Photoshop — пошаговый процесс создания анимированной гифки через Фотошоп. Скриншоты помогут разобраться пользователям с любым уровнем подготовки. Процедура на самом деле не такая уж и сложная.
• Начинаем рисовать с нуля — здесь приведены 6 простых упражнений, полезных для освоения базовых техник и особенностей рисования. Такой себе мини-тренинг нужных в этом деле навыков.
• Создание фавиконки в Логастер — на примере одного из сервисов показано как сделать свою мини-инонку для сайта. Не смотря на то, что проект не бесплатный, он может оказаться более выгодным нежели работа с фрилансерами.
• Подчеркивание в CSS (text-decoration) — описание функции подчеркивания элементов контента веб-страницы, которое допускается применять в тексте и ссылках. Рассмотрели все свойства и варианты на реальных примерах кода.
• Тестируем фоторедактор Movavi — обзор основных фишек и функций программы, а также демонстрация работы в ней для обработки фото. Внедрение эффектов на картинке и удаление лишних объектов занимает считанные секунды.

Полезные материалы дизайнерам

Скачать все архивы из заметок вы можете абсолютно бесплатно, однако перед использованием желательно проверить по какой лицензии они распространяются. Подборок в 2017 было чуть меньше нежели годом ранее, но сами по себе статьи оказались более масштабными. 

Иконки 

• Красочные иконки Icojam — очень яркие качественные изображения, которые мы выбрали из одного интересного веб-проекта. В некоторых наборах кроме цветных есть также монохромные и объекты с тонкими линиями. Реально это одни из лучших работ, что попадались в сети. 
• Мини-иконки небольших размеров от 48×48 до 16×16 (25+ архивов). Подобная графика используется в навигации сайта или программах. Есть реализации в разных стилях: минималистичные, с максимальной детализацией и т.п.
• Цветы в PNG и векторе — если вам нужны изображения цветов для украшения веб-ресурсов или создания печатной продукции, то статья однозначно пригодится. Картинки яркие, красочные, где-то чуть лучше прорисованы, где-то просто образы.
• Отличные пиктограммы для сайта — оочень много наборов схематических иконок, в которых в отличии от предыдущего мини-формата допускаются объекты чуть большего размера. Единственное требование — минимальная детализация, поэтому почти все они монохромны.

Кисти и текстуры

• Кисти боке для фотошопа — в дополнение заметкам с красивыми фотками, где применен данный эффект, и наборами текстур решили также добавить соответствующие кисти. Они позволят создавать собственные «модификации» любых изображений.
• Акварельные текстуры и фоны — выбирайте из 55-ти разных объектов подходящие вам по технике исполнения и цветовой палитре. Есть фоны попроще, сложные, с минимальным количеством краски и т.п.
• Кисти звезды — 40+ ссылок для скачивания наборов фотошоп кистей в форме звездного неба, свечения и т.п. В каждой из них найдете от нескольких до десятков файлов, добавляющих красивый визуальный эффект.

Шрифты 

• Шрифты мелом на доске — позволяют создавать соответствующие по стилистике надписи. Здесь важно правильно выбрать фон. Данные декоративные шрифты абсолютно разные: жирные, прописные, с тенью, заштрихованные и т.д. Всего 50 архивов.
• Лучшие Google шрифты заголовков — подборка из десяти топовых вариантов оформления заголовка для контента на странице. Все они взяты с Google Fonts, а значит бесплатные и легко подключаются. Скриншоты покажут как будет смотреться итоговый результат с текстом.

Шаблоны

• Monstroid 2 — супер крутое и функциональное решение под WordPress проекты. С помощью этого макета сможете реализовать практически любой по сложности сайт, а имеющиеся в комплекте темы позволяют выбирать оформление под те или иные ниши. Короче говоря, максимально универсальный инструмент по вменяемой доступной цене.
• Шаблоны портфолио MotoCMS — неплохие варианты дизайна для творческих и креативных людей: фотографов, писателей, музыкальных исполнителей, моделей и т.п.  В данной системе разные детали и элементы на веб-страниц достаточно легко редактируются.
• Шаблоны сайта строительной компании — еще 10 тематических макетов под конструктор MotoCMS. Они отлично подойдут корпоративным веб-ресурсам, что так или иначе связаны со стройкой, соответствующей продукцией, архитектурными задачами и т.д.

Вдохновение

Здесь собраны заметки с работами дизайнеров и фотографов, которые помогут отвлечься и справиться с творческим кризисом. Вдохновение полезно в любой креативной профессии, поэтому мы периодически и размещаем подобные публикации. Первая подкатегория с примерами некоторых классических объектов веб-страниц дополняет статьи из первого раздела.

Элементы сайта

• Хлебные крошки с реальных онлайн-ресурсов и просто графические концепты этой функции. В принципе, придумать что-то оригинальное сложно, но в некоторых случаях у дизайнеров это получается.
• Страница о сотрудниках — часто встречается в корпоративных проектах, способствует «доверительным» отношениям с посетителями/клиентами. Внешний вид зависит от количества работников: для больших коллективов могут просто добавляться фото, в маленьких — более детальная информация о людях.
• Дизайн веб-кнопок — подборка скриншотов с вариантами кнопок на сайтах и в интерфейсах приложений, которые были популярны в период 2009 — 2017 годов. Интересно отследить как менялись тренды и мода в этом направлении.

Веб-дизайн и логотипы

• Примеры WooCommerce дизайнов — этот модуль интернет-магазина не зря является одним из самых популярных, ведь он позволяет реализовывать столь удивительные и разные проекты. Если перед вами стоит задача создания eCommerce шаблона, статья пригодится как нельзя кстати.
• Зимние дизайны — рассматриваем сайты зимней тематики, где в основном выбирается холодная палитра цветов. Все остальные детали напрямую зависят от специфики/направленности конкретного проекта: для курортов характерны описания с фото, для туров — бронирование и т.п.
• Логотипы с котами — простая, но интересная подборка лого, где встречаются изображения котов. Как правило, результат зависит от названия и специфики бренда, под который он разрабатывается.

Художники иллюстраторы

• Пейзажи Me Kyeoung Lee — милые, очаровательные и очень атмосферные зарисовки мини магазинчиков Южной Кореи. Тема, казалось бы, немного странная и простая, но исполнение, выбранные ракурсы, детализация позволяют получить весьма оригинальный результат.
• Акварели Tilen Ti  — современного художника из Малайзии. В работах используются красочные акварельные брызги, создающие яркие силуэты из обычных, по сути, объектов.
• Иллюстратор Jason Solo — футуристическая графика в некой «синтипоп-арт» ретро стилистике, имеющая специфические ограниченные наборы цветов и образы.
• Carne Griffiths — британский художник с необычной техникой портретов, которые он рисует смешивая чернила, чай и другие жидкости. В отличии от второго автора практически все образы выполнены в пастельных тонах.

Фотография

• Красивые фото с боке — более 50-ти картинок с примерами данного эффекта. За счет размытия фона и акцента на основных деталях получается добиться интересной картинки.
• Фотографии зимы в природе — подборка приятных зимних пейзажей, которые помогают окунуться в соответствующую атмосферу этого времени года. Если в ваших шиторах не хватает снега, обязательно гляньте заметку.
• Креативная обработки детских фото — демонстрация эффектов и необычных композиций для преобразования детских фотографий в оригинальные сюжеты.

Сайты и сервисы

Здесь представлены разные инструменты, с которыми сталкиваются дизайнеры и разработчики. Часть из них оформлена в виде дайджеста с короткими обзорами, некоторые мы рассмотрели чуть более детально.

• Выпуск №6: коды цветов Coffee is the color, Type Terms о типографике, теги HTML Cheat Sheet, фотки 500px, иконки Feather icons, кнопки шеринга Sharingbuttons.io.
• Подборка №7: два ресурса по шрифтам Nerd Fonts и Fontjoy, полезные ссылки Design Resources, бесплатные Free PSD Files, цвета Color Tool, фотосток Stockio.
• Дайджест №8: коллекция лендингов Good Web Design, сервисы по лого DesignEvo и Logo Crunch, скрипт Balloon.css, гайд по типографии Better Typography, генератор Favicon.
• Подкасты по дизайну и UX — отличный гостевой пост с перечнем сайтов источников тематических подкастов. Данный (местами забытый) формат подачи контента позволяет эффективнее усваивать информацию.

Проекты по веб-дизайну

• Онлайн редакторов иконок — 5 полезных бесплатных ресурсов, где их можно подправить или нарисовать с нуля. По каждому есть описание преимуществ и показан пример работы.
• Архивы русских шрифтов — обзор 7 веб-каталогов для скачивания русскоязычных кириллических шрифтов. Они пригодятся, если нужно создавать графику под рунет, поскольку на топовых площадках в основном представлен английский алфавит.
• StickPNG.com — архив PNG клипартов из более чем 13 тысяч изображений. Все они доступны с прозрачным фоном, а также рассортированы в разные категории.
• Подбор цвета в дизайне — полезные проекты по цветовому оформлению веб-страниц или UX интерфейсов: поиск вдохновения, непосредственно создание палитр и проверка их доступности для пользователей.
• W3Schools — целиком и полностью посвящен вопросу цвета в Web’е. Здесь есть инструменты выбора, смешивания, конвертирования цветов, а также их названия и коды. Кроме того, найдете схемы Color Schemes, градиенты и парочку других фишек.

Веб-разработка

• В 2017 было сразу две статьи про конструктор Wix — сначала рассмотрели новые приложения и функции, а чуть позже рассказывали о продвинутой функциональности Wix Code, которая добавляет в сервис работу с базой данных, генерирование динамических  страниц и внедрение Javascript. Его по праву считают одним из лучших в своей нише.
• UI Patterns — это своего рода библиотека элементов дизайна сайтов и веб-интерфейсов. Почитайте зачем используются те или иные объекты, как лучше их вставлять на страницу + посмотрите скриншоты примеров их реализации.
• Сервис Kwork — обзор новой биржи фриланса, где каждая услуга стоит 500 рублей. В посте приведены основные фишки проекта, показаны кейсы как там можно зарабатывать + есть парочка советов.

Итого получилось 55 статей — вполне хорошо, но еще есть куда стремиться. Надеемся, вы нашли в данном дайджесте для себя что-то полезное. Через несколько дней приступим к публикации новых заметок блога, а работу по дизайну планируем завершить в течение 1-2 месяцев.